<script lang="ts" setup name="Verify">
/**
 * Verify 验证码组件
 * @description 分发验证码使用
 * */
import { VerifyPoints, VerifySlide } from './Verify'
const { t } = useI18n()
const visible = ref(false)

const emit = defineEmits(['success', 'error'])

const props = defineProps({
  captchaType: {
    type: String,
    required: true
  },
  mode: {
    type: String,
    default: 'dialog' // dialog (弹出式) | hover（触发式） | embedded（嵌入式）
  },
  size: {
    type: String,
    default: '' // '' (系统默认) | default（默认大小）| large（大） | small（小）
  }
})

const { captchaType, mode, size } = toRefs(props)
const componentType: any = ref(undefined)
const VerifyDialogRef: any = ref()
const close = () => {
  visible.value = false
}

const open = () => {
  visible.value = true
}

defineExpose({ open, close })

const successHandle = (data) => {
  emit('success', data)
  if (mode.value === 'dialog') {
    setTimeout(() => {
      close()
    }, 600);
  }
}

watchEffect(() => {
  switch (captchaType.value) {
    case 'blockPuzzle':
      componentType.value = markRaw(VerifySlide)
      break
    case 'clickWord':
      componentType.value = markRaw(VerifyPoints)
      break
  }
})
</script>

<template>
  <el-dialog v-if="mode==='dialog'" ref="VerifyDialogRef" v-model="visible" modal-class="verify-dialog" :fullscreen="false" :width="360" :show-close="false" destroy-on-close>
    <template #header>
      <div class="relative flex items-center justify-between leading-none text-16px">
        <slot name="title">
          {{ t('captcha', 'verification') }}
        </slot>
        <div class="absolute right-0px top-[50%] h-32px flex translate-y-[-50%] items-center justify-between mr-[-10px]">
          <SvgIcon class="is-hover !w-32px !h-32px items-center cursor-pointer" icon="ep:close" color="var(--el-color-info)" @click="close" />
        </div>
      </div>
    </template>
    <component :is="componentType" v-if="componentType" :captchaType="captchaType" :mode="mode" :size="size" @success="successHandle" />
  </el-dialog>
  <template v-else>
    <component :is="componentType" v-if="componentType" :captchaType="captchaType" :mode="mode" :size="size" @success="successHandle" />
  </template>
</template>

<style lang="scss">
.verify-dialog {
  .el-dialog {
    --el-dialog-padding-primary: 16px;
    --el-dialog-margin-top: 50%;

    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    touch-action: none;

    .el-dialog__header {
      padding: 16px;
      margin: calc(0px - 16px) calc(0px - 16px) 0;
      border-bottom: none;
      user-select: none;

      .el-icon {
        &:hover {
          color: var(--el-color-primary) !important;
        }
      }
    }

    .el-dialog__body {
      padding: 16px 0 0;
      border-bottom: none;
    }
  }
}
</style>
